<template>

	<view>

		<view style="height: 20rpx;"></view>
		<view class="table_unit">
			<view style="width: 465rpx; font-size:25rpx; margin-left: 15rpx;">
				{{ vuex_select_equipment.sensorType[0].zhName ? vuex_select_equipment.sensorType[0].zhName : vuex_new_equipment.sensorType[1].zhName }}
				（{{ vuex_select_equipment.sensorType[0].chemicalName ? vuex_select_equipment.sensorType[0].chemicalName :  vuex_new_equipment.sensorType[1].chemicalName  }}）
			</view>
			<view style="font-size:25rpx; width: 310rpx;">
				{{ dateUnit }}/平均：
				<text :style="{color: getColorOne(convertInt(avg[0],0))}">
					{{ avg[0] ? convertInt(avg[0],0)  : '0.000'  }}ppm
				</text>
			</view>
		</view>

		<view style="margin-top: -50rpx;  margin-left: 30rpx;">
			<scroll-view scroll-left='1900' :scroll-x="true">
				<view style="height: 440rpx; width: 1900rpx;">
					<l-echart ref="chart_one"></l-echart>
				</view>
			</scroll-view>
		</view>

		<!--日期 图表-->
	<!-- 	<view style="height: 50rpx;"></view>
		<view class="table_unit">
			<view style="width:436rpx; font-size: 30rpx;">
				{{ vuex_select_equipment.sensorType[1].zhName ? vuex_select_equipment.sensorType[1].zhName : vuex_new_equipment.sensorType[1].zhName }}
				（{{ vuex_select_equipment.sensorType[1].chemicalName ? vuex_select_equipment.sensorType[1].chemicalName :  vuex_new_equipment.sensorType[1].chemicalName  }}）
			</view>
			<view style="font-size: 30rpx; width: 320rpx;">{{ dateUnit }}/
				平均：
				<text :style="{color: getColorTwo(convertInt(avg[1],1))}">
					{{ avg[1] ? (avg[1] / parseInt(this.vuex_select_equipment.gas[1].reducedUnit)).toFixed(3) : '0.000' }}ppm
				</text>
			</view>
		</view> -->

	<!-- 	<view style="margin-left: 30rpx; margin-top: -50rpx;" @click="handleParentClick">
			<scroll-view scroll-left='1900' :scroll-x="true">
				<view style="height: 380rpx; width: 1900rpx;">
					<l-echart ref="chart_two"></l-echart>
				</view>
			</scroll-view>
		</view>
 -->
	</view>


</template>

<script>
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
	export default {
		props: {

			canvasIds: {
				type: Object,
				default: {
					canvasOneId: "nHLyuIhBZnCVKMuHDySMVsxtVsJHIEVY",
					canvasTwoId: "nHLyuIhBZnCVKMuHDySMVsxtVsJHIEVYZ"
				},
			},

			categorie: {
				type: Array,
				default () {
					return ["1", "2"];
				}
			},

			//平均值单位 是日 月 还是年?
			dateUnit: {
				type: String,
				default: '日'
			},

			avg: {
				type: Array,
				default () {
					return [];
				}
			},
			//里面存储着传感器id
			gasType: {
				type: Array,
				default () {
					return []
				}
			},
			dataOne: {
				type: Array,
				default () {
					return [];
				}
			},
			dataTwo: {
				type: Array,
				default () {
					return []
				}
			}
		},
		name: "uchars",
		data() {
			return {
				//第一个图表
				option_one: {},
				//第二个图表
				option_two: {},

				valueOne: [],
				valueTwo: [],
				hchoReducedUnit: 0,
				tvocReducedUnit: 0,
				gradientColor: ['#74b5a8', '#E7BB38', '#FE6A01'],
				gradientSplicing: 'l(0)',
				gradientSplicingTwo: 'l(0)',
				hchoAlarmRange: [],
				tvocAlarmRange: [],
				gradientPhase: 0,
				gasTypeMap: new Map(),
			};
		},

		mounted() {
			//气体单位
			let units = this.vuex_select_equipment.gas;
			//气体单位进行分组
			for (let item of units) {
				this.gasTypeMap.set(item.id, item);
			}

			this.hchoReducedUnit = parseInt(this.gasTypeMap.get(this.gasType[0]).reducedUnit);
			this.tvocReducedUnit = parseInt(this.gasTypeMap.get(this.gasType[1]).reducedUnit);

			//气体危险单位警戒
			this.hchoAlarmRange = this.gasTypeMap.get(this.gasType[0]).alarmRange.split(':');
			this.tvocAlarmRange = this.gasTypeMap.get(this.gasType[1]).alarmRange.split(':');



			//遍历数据
			for (var i = 0; i < this.dataOne.length; i++) {
				let dataOne = [
					this.categorie[i],
					this.dataOne[i] != '' ? Number.parseFloat((this.dataOne[i] / this.hchoReducedUnit).toFixed(
						3)) : null
				]

				let dataTwo = [
					this.categorie[i],
					this.dataTwo[i] != '' ? Number.parseFloat((this.dataTwo[i] / this.tvocReducedUnit).toFixed(
						3)) : null
				]
				//将表哥数据添加进去
				this.valueOne.push(dataOne);
				this.valueTwo.push(dataTwo);
			}


			//警告值
			var hchoWarn = parseInt(this.hchoAlarmRange[0]) / this.hchoReducedUnit;
			var hchoDanger = parseInt(this.hchoAlarmRange[1]) / this.hchoReducedUnit;


			//求出图表1 图表2的最大值
			let oneMax = 0;
			let twoMax = 0;
			for (var i = 0; i < this.valueOne.length; i++) {
				if (this.valueOne[i][1]) {
					//求图1 最大值
					console.log("this.valueOne[i]", this.valueOne[i][1]);
					if (this.valueOne[i][1] > oneMax) {
						oneMax = this.valueOne[i][1];
					}
					//求图二最大值
					if (this.valueTwo[i][1] > twoMax) {
						twoMax = this.valueTwo[i][1];
					}
				}

			}

			//曲线最大值

			oneMax = parseInt(oneMax * 1000);
			if (oneMax > 100) {
				oneMax = oneMax - oneMax % 100;
			}

			if (oneMax > 10 && oneMax < 100) {
				oneMax = oneMax - oneMax % 10;
				oneMax += 10;
			}
			oneMax = oneMax * 4;
			oneMax = oneMax / 1000;

			twoMax = parseInt(twoMax * 2) + 2;



			//ehcars_one------>
			this.option_one = {
				title: {
					left: '1%'
				},
				tooltip: {
					trigger: 'none'
				},
				grid: {
					left: '4.2%',
					bottom: '10%',
					right: '1%',
				},
				xAxis: {
					data: this.valueOne.map(function(item) {
						return item[0];
					}),

					//修改负责线的亮度

				},
				yAxis: {
					axisLine: {
						lineStyle: {
							color: '#717171'
						}
					},
					splitLine: {
						lineStyle: {
							color: '#717171'
						}
					},
					axisTick: {
						lineStyle: {
							color: '#717171'
						}
					},
					max: oneMax
				},
				dataZoom: [{
					type: 'inside',
					throttle: 50
				}],
				visualMap: {
					show: false,
					pieces: [{
							gt: 0,
							lte: hchoWarn,
							color: '#A3FFED'
						},
						{
							gt: hchoWarn,
							lte: hchoDanger,
							color: '#E7BB38'
						},
						{
							gt: hchoDanger,
							lte: 200,
							color: '#FE6A01'
						},
					],
					outOfRange: {
						color: '#999'
					}
				},
				series: {
					name: '检测值',
					type: 'line',
					smooth: true,
					symbol: 'circle', // 隐藏数据点
					data: this.valueOne.map(function(item) {
						return item[1];
					}),
					label: {
						show: true, // 显示节点值
						position: 'top', // 设置节点值显示在节点的顶部
						formatter: function(params) {
							var value = params.value; // 节点的值
							// 根据节点的值设置不同的颜色
							if (value < hchoWarn) {
								return '{a|' + value + '}';
							} else if (value >= hchoWarn && value < hchoDanger) {
								return '{b|' + value + '}';
							} else {
								return '{c|' + value + '}';
							}
						},
						rich: {
							a: {
								color: '#A3FFED'
							}, // 值小于50的颜色为红色
							b: {
								color: '#E7BB38'
							}, // 值大于等于50且小于80的颜色为绿色
							c: {
								color: '#FE6A01'
							} // 值大于等于80的颜色为蓝色
						}
					}
				}
			}


			//第一个图表渲染

			this.$refs.chart_one.init(echarts, chart => {
				chart.setOption(this.option_one);
			});




			//警告值
			var tvocWarn = parseInt(this.tvocAlarmRange[0]) / parseFloat(this.tvocReducedUnit);
			var tovcDanger = parseInt(this.tvocAlarmRange[1]) / parseFloat(this.tvocReducedUnit);

			//第二个图表渲染
			//ehcars_one------>
			this.option_two = {
				title: {
					left: '1%'
				},
				tooltip: {
					show: false, // 隐藏数值提示框
					trigger: 'axis'
				},
				grid: {
					left: '3.6%',
					bottom: '10%',
					right: '1%',
				},
				xAxis: {
					data: this.valueTwo.map(function(item) {
						return item[0];
					}),
					  splitLine: {
					      lineStyle: {
					        color: '#000000' // 将网格线颜色调暗为灰色
					      }
					    },
				},
				yAxis: {
					axisLine: {
						lineStyle: {
							color: '#717171'
						}
					},
					splitLine: {
						lineStyle: {
							color: '#717171'
						}
					},
					axisTick: {
						lineStyle: {
							color: '#717171'
						}
					},
					max: twoMax // 设置右边提示辅助值
				},
				visualMap: {
					show: false,
					pieces: [{
							gt: 0,
							lte: tvocWarn,
							color: '#A3FFED'
						},
						{
							gt: tvocWarn,
							lte: tovcDanger,
							color: '#E7BB38'
						},
						{
							gt: tovcDanger,
							lte: 200,
							color: '#FE6A01'
						},
					],
				},
				series: {
					name: '检测值',
					type: 'line',
					smooth: true,
					symbol: 'circle', // 隐藏数据点
					data: this.valueTwo.map(function(item) {
						return item[1];
					}),
					label: {
						show: true, // 显示节点值
						position: 'top', // 设置节点值显示在节点的顶部
						formatter: function(params) {
							var value = params.value; // 节点的值
							// 根据节点的值设置不同的颜色
							if (value < tvocWarn) {
								return '{a|' + value + '}';
							} else if (value >= tvocWarn && value < tovcDanger) {
								return '{b|' + value + '}';
							} else {
								return '{c|' + value + '}';
							}
						},
						rich: {
							a: {
								color: '#A3FFED'
							}, // 值小于50的颜色为红色
							b: {
								color: '#E7BB38'
							}, // 值大于等于50且小于80的颜色为绿色
							c: {
								color: '#FE6A01'
							} // 值大于等于80的颜色为蓝色
						}
					}
				}
			}



			this.$refs.chart_two.init(echarts, chart => {
				chart.setOption(this.option_two);
			});



		},
		created() {},
		methods: {

			//阻止事件冒泡
			handleParentClick() {},
			//获取到颜色
			getColorOne(value) {
				if (value < (this.hchoAlarmRange[0] / this.hchoReducedUnit)) {
					return this.gradientColor[0];
				}

				if (value < (this.hchoAlarmRange[1] / this.hchoReducedUnit)) {
					return this.gradientColor[1];
				}

				if (value > (this.hchoAlarmRange[1] / this.hchoReducedUnit)) {
					return this.gradientColor[2];
				}
				return '#ffffff';
			},

			//获取第二个传感器颜色
			getColorTwo(value) {
				if (value < (this.tvocAlarmRange[0] / this.tvocReducedUnit)) {
					return this.gradientColor[0];
				}

				if (value < (this.tvocAlarmRange[1] / this.tvocReducedUnit)) {
					return this.gradientColor[1];
				}

				if (value > (this.tvocAlarmRange[1] / this.tvocReducedUnit)) {
					return this.gradientColor[2];
				}
				return '#ffffff';
			},

			convertInt(value, index) {
				let floating = value / this.vuex_select_equipment.gas[index].reducedUnit;
				let str = floating.toFixed(3);
				let float = parseFloat(str);
				return float;
			},
			//获取到颜色
			//获取到危险等级
			getDangerGrade(currentValue, dangerNumbers, reducedUnit) {
				for (var i = 0; i < dangerNumbers.length; i++) {
					if ((currentValue * reducedUnit) < parseInt(dangerNumbers[i])) {
						return i; //危险等级 0 良好 1  警告 2 超标
					}
				}
				//如果全部都是大于就是最危险的等级
				return 2;
			},

		}
	}
</script>

<style lang="scss" scoped>
	.charts {
		width: 750rpx;
		height: 500rpx;
	}

	.table_unit {
		display: flex;
		justify-content: center;
		align-items: flex-end;
		position: absolute;
		left: 15rpx;
	}
</style>